<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>报销审批</title>
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css">
    <!-- <link rel="stylesheet" type="text/css" href="../css/app.css" /> -->
    <link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <style>
        .file-upload{ float: left; width: 3rem; height: 3rem; margin-top: .8rem; margin-left: .8rem; text-align: center;line-height: 3rem; overflow: hidden; position: relative; }
        .delete-btn {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 28px;
            height: 28px;
            line-height: 28px;
            background-color: rgba(0,0,0,0.6);
            margin-left: -14px;
            margin-top: -14px;
            color: #fff;
            text-align: center;
            border-radius: 50%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="aui-content aui-margin-b-15">
        <ul class="aui-list aui-form-list aui-margin-t-15">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        消费日期：
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" placeholder="请选择" id="starttime" class="selectTimeBtn" data-options='{"type":"date","beginYear":2017,"endYear":2019}' readonly>
                    </div>
            
                </div>
            </li>
        </ul>
        <ul class="aui-list aui-form-list aui-margin-t-15">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        报销金额：
                    </div>
                    <div class="aui-list-item-input">
                        <input type="number" id="reimbursement" placeholder="0.00">
                    </div>
                </div>
            </li>
        </ul>

        <ul class="aui-list aui-form-list aui-margin-t-15">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        报销原因：
                    </div>
                    <div class="aui-list-item-input">
                        <textarea id="reason" placeholder="请填写报销原因..."></textarea>
                    </div>
                </div>
            </li>
        </ul>
        <ul class="aui-list aui-form-list aui-margin-t-15">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        上传票据：
                    </div>
                </div>
            </li>
            <li style="height: 4.6rem;">
                <div id="imgUpload">
                    <!-- <div class="aui-border aui-text-center file-upload"><img src="../image/demo1.png" alt=""></div>
                    <div class="aui-border aui-text-center file-upload"><img src="../image/demo1.png" alt=""></div>
                    <div class="aui-border aui-text-center file-upload"><img src="../image/demo1.png" alt=""></div> -->
                </div>
                <div class="aui-border aui-text-center file-upload" style="color: #999;" onclick="openPicture()" id="addSelect" >
                    <i class="aui-iconfont aui-icon-plus"></i>
                </div>
            </li>
        </ul>
        <ul class="aui-list aui-form-list aui-margin-t-15">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        审批人：
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" id="approval" placeholder="请选择" readonly onclick="openWin('workflow_add_mail', 'approval')">
                    </div>
            
                </div>
            </li>
        </ul>

        <ul class="aui-list aui-form-list aui-margin-t-15">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label">
                        抄送：
                    </div>
                    <div class="aui-list-item-input">
                        <input type="text" id="cc" placeholder="请选择" readonly onclick="openWin('workflow_add_mail', 'cc')">
                    </div>
                </div>
            </li>
        </ul>

        <div class="aui-content aui-margin-15">
            <div class="aui-btn aui-btn-info aui-btn-block aui-btn-sm" onclick="saveWork()">提交</div>
        </div>
    </div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-toast.js" ></script>
<script type="text/javascript" src="../script/mui.min.js"></script>
<script type="text/javascript" src="../script/mui.picker.min.js"></script>
<script type="text/javascript" src="../script/zepto.min.js" ></script>
<script type="text/javascript" src="../script/SHA1.js" ></script>
<script type="text/javascript">
    var toast = new auiToast();
    var imgNumber = 0;
    
    // 增加Array对象中remove方法
    Array.prototype.indexOf = function(val) {
        for (var i = 0; i < this.length; i++) {
            if (this[i] == val) return i;
        }
        return -1;
    };
    Array.prototype.remove = function(val) {
        var index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };
    var path = new Array();
    apiready = function(){

    };


    // 打开相册
    function openPicture() {
        var UIMediaScanner = api.require('UIMediaScanner');
        UIMediaScanner.open({
            type: 'picture',
            column: 4,
            classify: true,
            max: 4-imgNumber,
            sort: {
                key: 'time',
                order: 'desc'
            },
            texts: {
                stateText: '已选择*项',
                cancelText: '取消',
                finishText: '完成'
            },
            styles: {
                bg: '#fff',
                mark: {
                    icon: '',
                    position: 'bottom_left',
                    size: 20
                },
                nav: {
                    bg: '#eee',
                    stateColor: '#000',
                    stateSize: 18,
                    cancelBg: 'rgba(0,0,0,0)',
                    cancelColor: '#000',
                    cancelSize: 18,
                    finishBg: 'rgba(0,0,0,0)',
                    finishColor: '#000',
                    finishSize: 18
                }
            },
            scrollToBottom: {
                intervalTime: 3,
                anim: true
            },
            exchange: true,
            rotation: true
        }, function(ret) {
            if (ret.list) {
                imgNumber += ret.list.length;
                if (imgNumber >= 4) $('#addSelect').css({'display': 'none'});
                var str = '';
                for (var i = 0; i < ret.list.length; i++) {
                    path.push(ret.list[i].path);
                    str += '<div class="aui-border aui-text-center file-upload" data="aaa">';
                    str += '    <img src="'+ret.list[i].path+'">';
                    str += '    <div class="delete-btn" onclick="delPicture(this)">'
                    str += '        <i class="aui-iconfont aui-icon-trash"></i>'
                    str += '    </div>'
                    str += '</div>';
                }
                $('#imgUpload').append(str);
            }
        });
    }

    // 删除预览图片
    function delPicture(obj) {
        // alert(obj)
        var div = $(obj).parent();
        var img = $(div).children('img');
        var imgSrc = $(img).attr('src');
        path.remove(imgSrc);
        // alert(img)
        // alert($(img).attr('src'))
        $(div).remove();
        imgNumber--;
        // alert(imgNumber)
        // alert(path)
        if (imgNumber < 4) $('#addSelect').css({'display': 'block'});
    }


    var mask = false;
    function saveWork () {
        // 提交成功 在窗口关掉前阻止再次提交
        if (mask) return false;
        var starttime = $('#starttime').val();
        var reimbursement = $('#reimbursement').val();
        var reason = $('#reason').val();
        var cc = $('#cc').val();
        var leader = $('#approval').val();
        
        if (starttime && reimbursement && reason && leader) {
            api.ajax({
                url: ServeUrl + 'm=Workflow&a=addWork',
                method: 'post',
                data: {
                    values: {
                        user : $api.getStorage("username"),
                        starttime : starttime,
                        reimbursement : reimbursement,
                        reason : reason,
                        leader : leader,
                        cc : cc,
                        type : 4,
                    },
                    files: {
                        file0: path[0], // 最多四个 没有就空着
                        file1: path[1],
                        file2: path[2],
                        file3: path[3],
                    },
                },
                dataType : 'json',
            }, function(ret, err) {
                if (ret.status) {
                    toast.success({
                        title:"添加成功",
                        duration:1500
                    });
                    // 提交成功 在窗口关掉前阻止再次提交
                    mask = true;
                    push(ret.leader) // 推送

                    setTimeout('api.closeWin()', 1500)
                } else {
                    toast.fail({
                        title:"添加失败",
                        duration:1500
                    });
                }
            });
        } else {
            toast.fail({
                title:"请将审批信息填写完整",
                duration:1500
            });
        }
        
    }

    (function($) {
        $.init();
        var btns = $('.selectTimeBtn');
        btns.each(function(i, btn) {
            btn.addEventListener('tap', function() {
                var _self = this;
                if(_self.picker) {
                    _self.picker.show(function (rs) {
                        // result.innerText = '选择结果: ' + rs.text;
                        _self.picker.dispose();
                        _self.picker = null;
                        btn.value = rs.text;
                    });
                } else {
                    var optionsJson = this.getAttribute('data-options') || '{}';
                    var options = JSON.parse(optionsJson);
                    var id = this.getAttribute('id');
                    /*
                     * 首次显示时实例化组件
                     * 示例为了简洁，将 options 放在了按钮的 dom 上
                     * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
                     */
                    _self.picker = new $.DtPicker(options);
                    _self.picker.show(function(rs) {
                        /*
                         * rs.value 拼合后的 value
                         * rs.text 拼合后的 text
                         * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
                         * rs.m 月，用法同年
                         * rs.d 日，用法同年
                         * rs.h 时，用法同年
                         * rs.i 分（minutes 的第二个字母），用法同年
                         */
                        btn.value = rs.text;
                        /* 
                         * 返回 false 可以阻止选择框的关闭
                         * return false;
                         */
                        /*
                         * 释放组件资源，释放后将将不能再操作组件
                         * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
                         * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
                         * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
                         */
                        _self.picker.dispose();
                        _self.picker = null;
                    });
                }
                
            }, false);
        });
    })(mui);

    // 打开窗口
    function openWin(name, selector) {
        api.openWin({
            name: name,
            url: name+'_win.html',
        });
        $api.setStorage("selectUserBack", "workflow_add_reimbursement");
        $api.setStorage("selectorID", selector);
    }

    function selectUsers (user) {
        $('#'+$api.getStorage('selectorID')).val(user);
        $api.setStorage("selectUserBack", "");
        $api.setStorage("selectorID", "");
    }

    
</script>
</html>